<template>
	<view class="service">
		<swiper class="white-dot" style="height: 400rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(i,k) in goods.detail_img" :key="k">
				<view class="swiper-item">
					<image :src="i" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 标题 -->
		<view class="block">
			<view class="title">{{goods.goods_name}}</view>
			<view class="price">{{goods.price}}积分</view>
		</view>

		<u-gap height="24"></u-gap>
		<view class="padding-lr-lg padding-tb bg-white">
			<view class="margin-tb-xs">
				<text class="text-gray">快递</text>
				<text class="margin-lr text-orange">|</text>
				<text>{{goods.delivery==1?'包邮':'咨询商家'}}</text>
			</view>
			<view class="margin-tb-xs">
				<text class="text-gray">库存</text>
				<text class="margin-lr text-orange">|</text>
				<text>{{goods.stock}}</text>
			</view>
		</view>

		<!-- 案例欣赏 -->
		<u-gap height="24"></u-gap>
		<view class="block">
			<view class="block-title">商品详情</view>
			<u-parse :html="goods.detail"></u-parse>
		</view>

		<u-gap height="80"></u-gap>
		<view class="btm-bar">
			<my-btn gold @click="show=true">立即兑换</my-btn>
		</view>

		<!-- 规格 -->
		<u-popup v-model="show" mode="bottom" height="70%">
			<view class="pop-ct">
				<view class="flex-row justify-between">
					<image :src="goods.picture" mode="aspectFill" class="good-pic"></image>
					<view class="flex-col info">
						<view class="price">{{sku.price}}积分</view>
						<view>选择产品规格</view>
					</view>
				</view>
				
				<view v-for="(i,index) in spec" :key="i.id">
					<u-gap height="40"></u-gap>
					<view class="left">{{i.name}}</view>
					<view class="specs">
						<view class="spec" :class="{on:j.id==i.active}" v-for="j in i.attribute" :key="j.id" @click="selectSpec(index, j.id)">{{j.attr_val}}</view>
					</view>
				</view>
				
				<u-gap height="40"></u-gap>
				<view class="flex-row justify-between align-center">
					<view class="left">库存：{{sku.stock}}</view>
				</view>
				<u-gap height="40"></u-gap>
				<view class="flex-row justify-between align-center">
					<view class="left">数量</view>
					<u-number-box v-model="quantity"></u-number-box>
				</view>
				
				<u-gap height="160"></u-gap>
				<view class="btm-bar">
					<my-btn gold @click="submit">立即兑换</my-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				goods: {},
				show: false,
				quantity: 1,
				spec: [],
				specs: [],
				sku: ''
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getData()
		},
		computed: {

		},
		watch: {

		},
		methods: {
			getData() {
				this.$u.get('/mall/goods/detail/' + this.id).then(res => {
					let goods = res.data.result.goods
					this.goods = goods
					this.sku = goods
					this.spec = goods.pro_attr
					this.spec.forEach(item => {
						item.active = 0
						this.specs.push(0)
					})
				})
			},
			selectSpec(index, j) {
				this.specs[index] = j
				this.spec[index].active = j
				this.$forceUpdate()
				this.getSku()
			},
			getSku() {
				let str = this.specs.join(',')
				this.sku = this.goods.skus.find(item => item.attribute==str) || this.goods
			},
			submit() {
				if (this.check()) {
					this.$u.post('/mall/order/create', {
						attribute: this.specs.join(','),
						id: this.id,
						quantity: this.quantity
					}).then(res => {
						if (res.data.code==0) {
							let no = res.data.result
							this.$goto('/pages/mall/exchange?no=' + no)
						} else if (res.data.code==-10001) {
							this.show = false
							uni.showModal({
								title: '提示',
								content: '请先添加收货地址?',
								success: res => {
									if (res.confirm) {
										this.$goto('/pages/address/add')
									}
								}
							})
						} else {
							this.$msg(res.data.msg)
						}
					})
				}
			},
			check() {
				if (!this.quantity) {
					this.$msg('请选择数量')
					return false
				}
				if (this.specs.includes(0)) {
					this.$msg('请选择规格')
					return false
				}
				
				return true
			}
		}
	}
</script>

<style lang="scss">
	.btm-bar {
		width: 100%;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-ct {
		position: relative;
		height: 100%;
		padding: 40rpx;

		.info {
			width: 400rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 40rpx;

			.price {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 139, 86, 1);
				line-height: 60rpx;
			}
		}
		
		.left {
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:40rpx;
		}
		.specs {
			display: flex;
			flex-flow: row wrap;
			padding-top: 16rpx;
		}
		.spec {
			min-width:206rpx;
			height:56rpx;
			line-height: 56rpx;
			text-align: center;
			background:rgba(245,245,245,1);
			border-radius:4rpx;
			margin: 0 16rpx 24rpx 0;
			padding: 0 24rpx;
			
			&.on {
				background:rgba(255,240,233,1);
				border:2rpx solid rgba(255,139,86,1);
				color: rgba(255, 139, 86, 1);
			}
		}
	}

	.good-pic {
		width: 242rpx;
		height: 148rpx;
		object-fit: cover;
		border-radius: 8rpx;
	}
</style>
